<template>
    <div>
        <TableHeader
            :quick-search-placeholder="'通过用户名/昵称模糊搜索'"
            :buttons="['refresh', 'add', 'edit', 'delete', 'quickSearch', 'comSearch', 'columnDisplay']"
        ></TableHeader>
        <Table ref="tableRef"></Table>
    </div>
</template>
<script setup lang="ts">
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import aaTableClass from '/@/utils/aaTable'

defineOptions({
    name: 'auth/admin',
})

const tableRef = ref()
const data = [
    {
        group_arr: [1],
        group_name_arr: ['超级管理组'],
        id: 1,
        username: 'admin',
        nickname: 'Admin',
        avatar: '/static/images/avatar.png',
        email: 'admin@buildadmin.com',
        mobile: '18888888888',
        last_login_time: '2025-03-04 15:45:17',
        last_login_ip: '127.0.0.1',
        motto: '',
        status: '1',
        update_time: 1741074317,
        create_time: 1738917624,
    },
]
const aaTable = new aaTableClass({
    column: [
        { type: 'selection', align: 'center', operator: false },
        { label: '用户名', prop: 'username', align: 'center', width: '160' },
        { label: '昵称', prop: 'nickname', align: 'center', width: '160' },
        {
            label: '角色组',
            prop: 'group_name_arr',
            align: 'center',
            width: '160',
            render: 'tags',
            operator: false,
        },
        { label: '头像', prop: 'avatar', align: 'center', width: '160', operator: false },
        { label: '邮箱', prop: 'email', align: 'center', width: '160' },
        { label: '手机号', prop: 'mobile', align: 'center', width: '160' },
        { label: '最后登录', prop: 'last_login_time', align: 'center', width: '160', render: 'datetime', operator: 'RANGE' },
        { label: '创建时间', prop: 'create_time', align: 'center', width: '160', render: 'datetime', operator: 'RANGE' },
        {
            label: '状态',
            prop: 'status',
            align: 'center',
            width: '160',
            render: 'tag',
            custom: { '0': 'danger', '1': 'success' },
            replaceValue: { '0': '禁用', '1': '启用' },
        },
        {
            label: '操作',
            prop: 'operation',
            align: 'center',
            width: '160',
            render: 'buttons',
            operator: false,
            buttons: [
                {
                    name: '编辑',
                    icon: 'fa fa-pencil',
                    render: 'tipButton',
                    title: '编辑',
                    type: 'primary',
                    click(row, field) {
                        console.log(row, field)
                    },
                },
            ],
        },
    ],
    data: data,
    total: 15,
})

provide('aaTable', aaTable)

onMounted(() => {
    aaTable.table.ref = tableRef.value
})
</script>
